<template>
	<view class="content" :style="'height:'+menuHeight+'px'">
		<!-- 顶部盒子 -->
		<view class="top" @click="showmore(0)">
			<view class="box" @click="exchangeCommunicationShow('QQ')">
				<img src="/static/img/message/QQ@2x.png" alt="">
				<span>交换QQ</span>
			</view>
			<view class="box" @click="exchangeCommunicationShow('微信')">
				<img src="/static/img/message/WeChatIcon@2x.png" alt="">
				<span>交换微信</span>
			</view>
			<view class="box" @click="exchangeCommunicationShow('电话')">
				<img src="/static/img/message/phoneIcon@2x.png" alt="">
				<span>交换电话</span>
			</view>
			<view class="box" @click="toChatSetting">
				<img src="/static/img/message/Frame@2x-3.png" alt="">
				<span>更多操作</span>
			</view>
		</view>
		
		<!-- 中间消息 -->
		<view class="mid" @click="showmore(0)">
			<scroll-view ref="scroll" :scroll-y="true" :style="'height: '+midHeight+'px'" :scrollTop='scrollTop'>
				<!-- 消息内容 -->
				<view class="message">
					<!-- 消息时间 -->
					<view class="time">
						<span>2022.08.24 15:35</span>
					</view>
					<!-- 我的消息 -->
					<view class="myMessage">
						<!-- 头像在消息右边 -->
						<rich-text :nodes="nodes"  class="messageContent"></rich-text>
						<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.zhimg.com%2Fv2-1140996165e34c47f1586e7e34a74e84_r.jpg&refer=http%3A%2F%2Fpic1.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663918149&t=51304ecefb44a5847249219c9d95fadc" alt="">
					</view>
					
					<!-- 别人的消息 -->
					<view class="othersMessage">
						<!-- 头像在消息左边 -->
						<img src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8568e76c-23c5-4d05-bd27-7ff891e61576/461db27c-628f-4548-895a-0e4593de93a9.png" alt="">
						<rich-text :nodes="nodes"  class="messageContent"></rich-text>
					</view>
				</view>
				<view class="message">
					<!-- 消息时间 -->
					<view class="time">
						<span>2022.08.24 15:35</span>
					</view>
					<!-- 我的消息 -->
					<view class="myMessage">
						<!-- 头像在消息右边 -->
						<view class="messageContent" v-html="msg">
							
						</view>
						<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.zhimg.com%2Fv2-1140996165e34c47f1586e7e34a74e84_r.jpg&refer=http%3A%2F%2Fpic1.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663918149&t=51304ecefb44a5847249219c9d95fadc" alt="">
					</view>
					
					<!-- 别人的消息 -->
					<view class="othersMessage">
						<!-- 头像在消息左边 -->
						<img src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8568e76c-23c5-4d05-bd27-7ff891e61576/461db27c-628f-4548-895a-0e4593de93a9.png" alt="">
						<view class="messageContent">
							你好你好你好你好你好你😄😄😄😄😄<img src="/static/img/message/emojis/难受@2x.png" alt="" style="height:22px;width:22px;vertical-align: -5px;">你好你好
						</view>
					</view>
				</view>
				<view class="message">
					<!-- 消息时间 -->
					<view class="time">
						<span>2022.08.24 15:35</span>
					</view>
					<!-- 我的消息 -->
					<view class="myMessage">
						<!-- 头像在消息右边 -->
						<view class="messageContent" v-html="msg">
							
						</view>
						<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.zhimg.com%2Fv2-1140996165e34c47f1586e7e34a74e84_r.jpg&refer=http%3A%2F%2Fpic1.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663918149&t=51304ecefb44a5847249219c9d95fadc" alt="">
					</view>
					
					<!-- 别人的消息 -->
					<view class="othersMessage">
						<!-- 头像在消息左边 -->
						<img src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8568e76c-23c5-4d05-bd27-7ff891e61576/461db27c-628f-4548-895a-0e4593de93a9.png" alt="" @click="scrollTop=999">
						<view class="messageContent">
							你好你好你好你好你好你😄😄😄😄汗滴禾下土
						</view>
					</view>
				</view>
				
				<view class="message">
					<!-- 消息时间 -->
					<view class="time">
						<span>2022.08.24 15:35</span>
					</view>
					<!-- 我的消息 -->
					<view class="myMessage">
						<!-- 头像在消息右边 -->
						<view class="messageContent" v-html="msg">
							
						</view>
						<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.zhimg.com%2Fv2-1140996165e34c47f1586e7e34a74e84_r.jpg&refer=http%3A%2F%2Fpic1.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663918149&t=51304ecefb44a5847249219c9d95fadc" alt="">
					</view>
					
					<!-- 别人的消息 -->
					<view class="othersMessage">
						<!-- 头像在消息左边 -->
						<img src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8568e76c-23c5-4d05-bd27-7ff891e61576/461db27c-628f-4548-895a-0e4593de93a9.png" alt="">
						<view class="messageContent">
							你好你😄😄😄😄😄你好你好,锄禾日当午
						</view>
					</view>
				</view>
			
			</scroll-view>
		</view>
		
		
		<!-- 底部输入框 -->
		<view class="bottom" @touchmove.prevent="touchmove">
			<!-- input -->
			<view class="input">
				<view @click="showmore(1)">常用语</view>
				<input type="text" maxlength="200" v-model="content"
				cursor-spacing="16" ></input>
				<!-- <textarea maxlength="200" v-model="content" :show-count="false"
				:show-confirm-bar="false" @focus="showmore(0)"
				:cursor-spacing="16"></textarea> -->
				<img src="/static/img/message/Group283@2x.png" alt="" @click="showmore(2)">
				<img src="/static/img/message/Group282@2x.png" alt="" 
				v-if="content.length===0" @click="showmore(3)">
				<view v-else @click="sendMessage">发送</view>
			</view>
			
			<!-- 1.常用语 -->
			<view class="commonMessage" v-show="showMore===1">
				<scroll-view :scroll-y="true" style="height:400rpx ;">
					<view class="messageItem" v-for="item,index in commonMessageItemList" 
					:key="index" @click="">
						<span>{{item}}</span>
					</view>
				</scroll-view>
				<view class="addCommonMessage">
					<view class="left" @click="show=2">
						<img src="/static/img/message/Subtract@2x.png" alt="">
						<span>添加常用语</span>
					</view>
					<img src="/static/img/message/Subtract@2x-2.png" alt="" 
					@click="toManageCommonMessage">
				</view>
			</view>
			<!-- 2.表情包 -->
			<view class="emoji" v-show="showMore===2">
				<scroll-view :scroll-y="true" style="height:400rpx ;">
					<view class="emojiBox">
						<emojis></emojis>
						
					</view>
				</scroll-view>
			</view>
			
			
			<!-- 3.更多操作 -->
			<view class="moreOperation" v-show="showMore===3">
				<img src="/static/img/message/Group469@2x.png" alt="" @click="sendPic">
				<img src="/static/img/message/Group470@2x.png" alt="" @click="takePic">
				<img src="/static/img/message/Group471@2x.png" alt="">
			</view>
		</view>
		
		<!-- 交换联系方式弹出层 -->
		<view class="">
			<u-popup mode="center" :show="show===1" round="12" :closeable="true" 
			@close="close" :closeOnClickOverlay="false">
				<view class="confirm">
					<span>交换{{exchangeType}}</span>
					<span>您将获得对方的电话</span>
					<span>并将预留的电话发送给对方</span>
					<view class="check">
						<button @click="close">取消</button>
						<button>确认</button>
					</view>
				</view>
			</u-popup>
		</view>
		
		<!-- 添加常用语弹出层 -->
		<view class="">
			<u-popup mode="center" :show="show===2" round="12" :closeable="true"
			@close="close">
				<view class="popup">
					<span>添加常用语</span>
					<textarea v-model="newCommonMessage" :show-confirm-bar="false"
					placeholder="请输入常用语,不超过200字" maxlength="200"
					placeholder-style="font-size:24rpx" :show-count="false"></textarea>
					<span>{{newCommonMessage.length}}/200</span>
					<button @click="addCommonMessage">添加</button>
				</view>
			</u-popup>
		</view>
		
		
	</view>
</template>

<script>
	import emojis from '@/subpageB/components/emojis.vue'
	import turnToEmoji from '@/subpageB/message/turnToEmoji.js'
	import parse from 'mini-html-parser2';
	
	export default {
		data() {
			return {
				content:'',					//要发送的内容
				show:0,						//弹出层 1-交换联系方式 2-添加常用语 
				showMore:0,					//底部输入的拓展
				exchangeType:'',			//交换哪种联系方式
				
				scrollTop:99999,			//滚动至最底部
				
				commonMessageItemList:['你好','你好'],
				
				newCommonMessage:'',
				
				msg:'',
				
				menuHeight:0,				//页面高度
				topHeight:0,				//顶部高度
				midHeight:0,				//中间滚动高度
				bottomHeight:0,				//底部高度
				
				nodes:[],
				
			}
		},
		components:{
			emojis
		},
		onLoad(options) {
			let data=JSON.parse(options.params);
			uni.setNavigationBarTitle({
				title:data.title
			})
			
			// this.menuHeight = uni.getSystemInfoSync().windowHeight
			// console.log(uni.getSystemInfoSync().windowHeight);
			
			this.$bus.$on('emoji',(name)=>{
				this.content+=name;
			})
			
			//获取整个页面高度（不包括标题栏）
			this.menuHeight = uni.getSystemInfoSync().windowHeight;
			this.topHeight=uni.upx2px(146);		//顶部高度（固定）
			this.bottomHeight=uni.upx2px(136);	//底部初始高度
			this.midHeight=this.menuHeight-this.topHeight-this.bottomHeight;	//中间可滚动高度
			console.log(this.menuHeight,this.topHeight,this.bottomHeight);
			
			
		},
		watch:{
			//bottom高度改变时,会修改mid的高度
			bottomHeight(){
				this.midHeight=this.menuHeight-this.topHeight-this.bottomHeight;
			}
		},
		methods: {
			exchangeCommunicationShow(type){
				// 交换联系方式
				this.exchangeType=type;
				this.show=1;
				
			},
			showmore(i){
				//更多操作：showmore: 1-常用语 2-表情包 3-发送图片或地址
				
				if(i===0||this.showMore===i){
					this.showMore=0;
					this.bottomHeight=uni.upx2px(136);
				}else{
					
					this.showMore=i;
					if(i===1){
						this.bottomHeight=uni.upx2px(640);
					}else if(i===2){
						this.bottomHeight=uni.upx2px(536);
					}else if(i===3){
						this.bottomHeight=uni.upx2px(392);
					}
					this.$nextTick(()=>{
						this.scrollTop++;
					})
					console.log(this.midHeight);
				}
				
				
			},
			blur(){
				this.showMore=0;
				this.bottomHeight=uni.upx2px(136);
			},
			sendMessage(){
				//发送信息
				// this.msg=this.$string2emoji(this.content)
				
				this.msg=turnToEmoji(this.content)	//将表情转化为图片富文本
				
				
				//将富文本解析为nodes结构
				parse(this.msg, (err, nodes) => {
				  if (!err) {
					this.nodes=nodes;
				  }
				})
				
				
				console.log('nodes',this.nodes);
				this.showMore=0;
			},
			chooseEmoji(){
				//选择emoji
				this.content+='[惊恐]'
			},
			close(){
				this.show=0;
			},
			addCommonMessage(){
				//添加常用语
				this.commonMessageItemList.push(this.newCommonMessage);
				this.newCommonMessage='';
				this.close();
			},
			sendPic(){
				//发送图片
				uni.chooseImage({
					count: 3,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: res=> {
						console.log(res);
						
					}
				});
			},
			takePic(){
				//拍照
				uni.chooseImage({
					count: 3,
					sizeType: ['original', 'compressed'],
					sourceType: ['camera'],
					success: res=> {
						console.log(res);
						
					}
				});
			},
			touchmove(e){
				//console.log(e);
				e.stopPropagation=()=>{
					return
				}
			},
			toChatSetting(){
				//前往聊天设置
				uni.navigateTo({
					url:'./chatSetting'
				})
			},
			toManageCommonMessage(){
				//前往常用语管理
				uni.navigateTo({
					url:'./manageCommonMessage'
				})
			}
			
		}
	}
</script>

<style scoped lang="scss">
	.content{
		width: 100%;
		background-color: #F3F7F8;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		
		
		.top{
			display: flex;
			background-color: #FFFFFF;
			
			.box{
				margin: 20rpx;
				flex:1;
				display: flex;
				flex-direction: column;
				align-items: center;
				
				>img{
					width: 56rpx;
					height: 56rpx;
					margin-bottom: 16rpx;
				}
				>span{
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #001A18;
				}
			}
		}
		
		
		
		.mid{
			.message{
				padding:0 32rpx;
				
				.time{
					text-align: center;
					margin: 40rpx 0;
					>span{
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #99A3A3;
					}
				}
				
				.myMessage{
					display: flex;
					justify-content: flex-end;
					align-items: flex-start;
					margin-bottom: 32rpx;
					
					.messageContent{
						padding:24rpx 32rpx;
						max-width: 402rpx;
						margin-right: 10rpx;
						background: #08C8BD;
						border-radius: 16rpx 0rpx 16rpx 16rpx;
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						
						.img{
							width: 44rpx;
							height: 44rpx;
						}
					}
					
					img{
						width: 96rpx;
						height: 96rpx;
						border-radius: 48rpx;
					}
				}
				
				.othersMessage{
					display: flex;
					margin-bottom: 32rpx;
					
					img{
						width: 96rpx;
						height: 96rpx;
						border-radius: 48rpx;
					}
					.messageContent{
						padding:24rpx 32rpx;
						max-width: 402rpx;
						margin-left: 10rpx;
						background: #FFFFFF;
						border-radius: 0rpx 16rpx 16rpx 16rpx;
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #001A18;
						
						
					}
				}
			}
		}
		
		.bottom{
			width: 686rpx;
			padding: 20rpx 32rpx 0;
			background-color: #FFFFFF;
			
			
			.input{
				// 输入栏
				display: flex;
				align-items: center;
				padding-bottom: 20rpx;
				border-bottom: 1px solid #F3F7F8;
				>view{
					display: flex;
					align-items: center;
					padding: 0 12rpx;
					margin-right: 16rpx;
					height: 72rpx;
					background: #08C8BD;
					border-radius:16rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}
				>view:nth-of-type(2){
					margin-right: 0;
				}
				>input{
					flex:1;
					padding: 14rpx 10rpx;
					height: 44rpx;
					background-color: #F3F7F8;
					border-radius: 12rpx;
				}
				>img{
					width: 60rpx;
					height: 60rpx;
					
				}
				>img:nth-of-type(1){
					margin: 0 20rpx;
				}
			}
			
			
			
			.commonMessage{
				//常用语
				.messageItem{
					margin: 0 32rpx;
					padding: 32rpx 0;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #001A18;
					border-bottom: 1px solid #F3F7F8;
				}
				
				.addCommonMessage{
					margin: 32rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.left{
						display: flex;
						align-items: center;
						>img{
							width: 32rpx;
							height: 32rpx;
							margin-right: 10rpx;
						}
						>span{
							font-size: 28rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #001A18;
						}
					}
					>img{
						width: 32rpx;
						height: 28rpx;
					}
				}
				
			}
			
			.emoji{
				.emojiBox{
					display: flex;
					justify-content: center;
				}
				
			}
			
			
			
			
			.moreOperation{
				width: 100%;
				height: 256rpx;
				
				>img{
					width: 128rpx;
					height: 128rpx;
					margin-top: 32rpx;
					margin-right: 32rpx;
				}
			}
			
		}
		
		.confirm{
			width: 514rpx;
			padding: 32rpx;
			background-color: #FFFFFF;
			border-radius: 24rpx;
			
			display: flex;
			flex-direction: column;
			align-items: center;
			
			>span:nth-of-type(1){
				margin: 48rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #001A18;
			}
			
			>span{
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #001A18;
			}
			
			.check{
				margin-top: 48rpx;
				display: flex;
				>button{
					display: flex;
					justify-content: center;
					align-items: center;
					width: 242rpx;
					height: 96rpx;
					background: #F6F7F9;
					border-radius: 16rpx;
					
					font-size: 32rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #656565;
				}
				>button:nth-of-type(2){
					background: #08C8BD;
					color: #FFFFFF;
					margin-left: 30rpx;
				}
			}
		}
		
		.popup{
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 622rpx;
			padding: 32rpx;
			background-color: #FFFFFF;
			border-radius: 24rpx;
			
			>span:nth-of-type(1){
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #001A18;
				margin-bottom: 32rpx;
			}
			>textarea{
				width: 590rpx;
				height: 216rpx;
				padding: 32rpx;
				background: #F3F7F8;
				border-radius: 16px;
			}
			>span:nth-of-type(2){
				margin-top: 10rpx;
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #99A3A3;
				align-self: flex-start;
			}
			>button{
				display: flex;
				justify-content: center;
				align-items: center;
				width: 622rpx;
				height: 96rpx;
				margin-top: 32rpx;
				background: #08C8BD;
				border-radius: 8px 8px 8px 8px;
				font-size: 16px;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
	}
</style>
